<template>
  <div class="hello">
    <div ref="scrollContainer"
      style="width: 80%; height: 30vh; overflow-y: scroll; border: 1px solid #ccc; margin-left: 10%;">
      <div style="width: 100%; height: 80vh;">
        <h1>Top</h1>
        <h1 style="margin-top: 70vh;">Bottom</h1>
      </div>
    </div>
    <button @click="scrollToBottom">滚动到底部</button>
    <button @click="scrollToTop">滚动到头部</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    scrollToBottom() {
      const container = this.$refs.scrollContainer;
      container.scrollTo({
        top: container.scrollHeight,
        behavior: 'smooth'
      });
    },
    scrollToTop() {
      const container = this.$refs.scrollContainer;
      container.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    }
  }
}
</script>

<style scoped></style>